<template>
  <div>
    <el-tree
      :data="menus"
      :props="defaultProps"
      :expand-on-click-node="false"
      :default-expanded-keys="expendedKeys"
      node-key="catId"
      @node-click="nodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'category',
  methods: {
    getMenuData () {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
      }).then(({data}) => {
        // console.log(data)
        this.menus = data.data
      })
    },
    nodeClick (data, node, component) {
      this.$emit('tree-node-click', data, node, component)
    }
  },
  created () {
    this.getMenuData()
  },
  data () {
    return {
      dialogType: '',
      dialogTitle: '',
      category: {
        name: '',
        parentCid: 0,
        catLevel: 0,
        showStatus: 1,
        sort: 0,
        catId: null,
        icon: '',
        productUnit: ''
      },
      menus: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      expendedKeys: [],
      dialogFormVisible: false
    }
  }
}
</script>

<style scoped>

</style>
